<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('柱状图')}`">{{ $t('柱状图') }}</t>
            <li>
                本示例配置来源：
                <a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-simple" target="_blank">Echarts基础柱状图</a>
            </li>
            <li>
                你可以使用<span class="d-code">getInstance</span>方法来获取组件内部的<span class="s-code">echarts 实例对象</span>，结合 Echarts 官方文档，从而根据你的需求来指定特殊功能项
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleBind">给图例绑定 click 事件</el-button>
            <el-button @click="handleUnbind">解绑 click 事件</el-button>
        </div>
        <sib-charts ref="chartsRef" :options="options"></sib-charts>
    </example>
</template>

<script>
import { ref } from 'vue';
import { ElNotification } from 'element-plus';

export default {
    setup() {
        const chartsRef = ref(null);
        return {
            chartsRef,
            options: {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                    },
                ],
            },
            handleBind() {
                const myChart = chartsRef.value.getInstance();
                myChart.on('click', (params) => {
                    console.log('bind:onclick ==> ', params);
                });
                ElNotification({
                    title: '温馨提示',
                    message: '给图例绑定click事件成功！你可以点击图中柱状条形，然后打开 F12查看打印结果',
                });
            },
            handleUnbind() {
                const myChart = chartsRef.value.getInstance();
                myChart.off('click');
                ElNotification({
                    title: '温馨提示',
                    message: 'click事件解绑成功',
                });
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleBind">给图例绑定 click 事件</el-button>
            <el-button @click="handleUnbind">解绑 click 事件</el-button>
        </div>
        <sib-charts ref="chartsRef" :options="options"></sib-charts>
    </div>
</template>

<script>
import { ref } from 'vue';
import { ElNotification } from 'element-plus';

export default {
    setup() {
        const chartsRef = ref(null);
        return {
            chartsRef,
            options: {
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                    },
                ],
            },
            handleBind() {
                // 获取 echarts 实例对象
                const myChart = chartsRef.value.getInstance();
                myChart.on('click', (params) => {
                    console.log('bind:onclick ==> ', params);
                });
                ElNotification({
                    title: '温馨提示',
                    message: '给图例绑定click事件成功！你可以点击图中柱状条形，然后打开 F12查看打印结果',
                });
            },
            handleUnbind() {
                // 获取 echarts 实例对象
                const myChart = chartsRef.value.getInstance();
                myChart.off('click');
                ElNotification({
                    title: '温馨提示',
                    message: 'click事件解绑成功',
                });
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
